<template>
  <common-drawer
    :width="1000"
    :visible="visible"
    title="智能体人设详情"
    @close="updateVisible(false)"
  >
    <a-descriptions bordered :column="2" size="default">
      <a-descriptions-item label="创建用户">{{ state.form.custName }}</a-descriptions-item>
      <a-descriptions-item label="智能体名称" >
        <p v-if="!state.form.isEditing" @click="update(state.form)">{{ state.form.nickName }}</p>
        <a-input  v-else auto-focus type="text" v-model:value="state.form.nickName" placeholder="Basic usage"  @blur="updateEdit(state.form)" />
        </a-descriptions-item>

      <!-- <a-descriptions-item label="审批状态">{{
        state.form.status ? '通过' : '待审批'
      }}</a-descriptions-item>
      <a-descriptions-item label="性别">{{
        state.form.sex === 'M' ? '男' : '女'
      }}</a-descriptions-item> -->

      <!-- <a-descriptions-item label="连接者数">{{ state.form.linkNum }}</a-descriptions-item>
      <a-descriptions-item label="粉丝数">{{ state.form.fanNum }}</a-descriptions-item> -->
    </a-descriptions>

    <a-collapse v-model:activeKey="activeKey" style="margin-top: 10px">
      <a-collapse-panel key="4" header="简介" >
        <p v-if="!state.form.isEditing"  @click="update(state.form)">{{ state.form.briefIntroduction }}</p>
        <a-input  v-else auto-focus type="text" v-model:value="state.form.briefIntroduction" placeholder="Basic usage"  @blur="updateEdit(state.form)" />
      </a-collapse-panel>

      <a-collapse-panel key="2" header="附加设定">
        <p v-if="!state.form.isEditing" @click="update(state.form)">{{ state.form.addSetting }}</p>
        <a-input  v-else auto-focus type="text" v-model:value="state.form.addSetting" placeholder="Basic usage"  @blur="updateEdit(state.form)" />
      </a-collapse-panel>

      <a-collapse-panel key="1" header="开场白">
        <p v-if="!state.form.isEditing" @click="update(state.form)">{{ state.form.prologue }}</p>
        <a-input  v-else auto-focus type="text" v-model:value="state.form.prologue" placeholder="Basic usage"  @blur="updateEdit(state.form)" />
      </a-collapse-panel>

      <a-collapse-panel key="3" header="形象描述">
        <p v-if="!state.form.isEditing" @click="update(state.form)">{{ state.form.imageDesc }}</p>
        <a-input  v-else auto-focus type="text" v-model:value="state.form.imageDesc" placeholder="Basic usage"  @blur="updateEdit(state.form)" />
      </a-collapse-panel>
    </a-collapse>
    <div style="display: flex; margin: 10px">
      <div style="line-height: 50px; margin-right: 10px">用户上传的基础形象图片:</div>
      <a-image :width="50" :src="state.form.uploadImageFileUrl"></a-image>
    </div>
    <div style="display: flex; margin: 10px">
      <div style="line-height: 50px; margin-right: 10px">智能基础形象图片:</div>
      <a-image :width="50" :src="state.form.imageFileUrl"></a-image>
    </div>
    <div style="display: flex; margin: 10px">
      <div style="line-height: 50px; margin-right: 10px">裁剪部分形象图片:</div>
      <a-image :width="50" :src="state.form.cropPartImageFileUrl"></a-image>
    </div>
    <a-table
      bordered
      row-key="key"
      :columns="memoryColumns"
      :data-source="state.form.styles"
      :pagination="false"
    />
    <!-- <div v-for="item in state.form.styles" :key="item">
      <div><span>画风:</span>{{ item.style }}</div>
      <div><span>标签ID:</span>{{ item.tagStyleNo }}</div>
    </div> -->
    <!-- <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="1" header="开场白">
        <p>{{ state.form.prologue }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="附加设定">
        <p>{{ state.form.briefIntroduction }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="形象描述">
        <p>{{ state.form.imageDesc }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="4" header="简介">
        <p>{{ state.form.briefIntroduction }}</p>
      </a-collapse-panel>
    </a-collapse> -->
  </common-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import CommonDrawer from '/@/components/CommonDrawer/index.vue';
import { AiAgentApi } from '/@/api/touch/aiAgent/AiAgentApi';
import { result } from 'lodash-es';
import {  message } from 'ant-design-vue';
const props = defineProps<{
  // 弹窗是否打开
  visible: Boolean;
  // 修改回显的数据
  detail?: Object;
}>();

const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'reload'): void;
}>();

const state = reactive({
  // 表单数据
  form: {},
});

const updateVisible = (value) => {
  emits('update:visible', value);
  emits('reload');
};
const activeKey = ref(['1', '2', '3', '4']);

const memoryColumns = ref([
  {
    title: '标签',
    dataIndex: 'style',
  },
  {
    title: '标签ID',
    dataIndex: 'tagStyleNo',
  },
]);
const update=(row)=>{
  row.isEditing=true
}
const updateEdit=(row)=>{
  row.isEditing=true
  AiAgentApi.edit(row).then((result)=>{
    message.success('修改成功'); 
  })

}
watch(
  () => props.detail,
  (val) => {
    if (val) {
      state.form = Object.assign({}, props.detail);
    }
  },
);
</script>
